<template>
  <el-form
    size="large"
    class="form-data"
    label-width="180px"
    :model="formData"
    scroll-to-error
  >
    <div class="form-data-title">用户设置</div>
    <div v-for="setting in formData" :key="setting.id">
      <el-form-item :label="setting.configText">
        <el-input v-if="setting.useControl === 'el-input'" clearable v-model="setting.configValue">
          <template #append v-if="setting.units">{{ setting.units }}</template>
        </el-input>
        <el-select v-model="setting.configValue" v-if="setting.useControl==='el-select'">
          <el-option
            v-for="item in setting.dataSource"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-radio-group v-model="setting.configValue" v-if="setting.useControl === 'el-radio'">
          <el-radio
            v-for="item in setting.dataSource"
            :label="item.value"
            :key="item.value"
          >{{ item.label }}</el-radio>
        </el-radio-group>
        <el-checkbox-group v-model="setting.configValueList" v-if="setting.useControl === 'el-checkbox'">
          <el-checkbox
            v-for="item in setting.dataSource"
            :key="item.value"
            :label="item.value"
          >{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </div>
    <div class="form-footer">
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button type="info" @click="handleClose">关闭</el-button>
    </div>
  </el-form>
</template>

<script setup>
import useStore from '@/store'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElLoading } from 'element-plus'
import { loadAllDefine, saveAllDefine } from '@/api/system/setting/Setting'

import '@/style/form.less'

const formData = ref([])
const route = useRoute()
const router = useRouter()
const { menuStore } = useStore()

const submitForm = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '保存中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  saveAllDefine(formData.value, '3').then(() => {
    loading.close()
    ElMessage.success('保存成功！')
  }).catch(() => {
    loading.close()
    ElMessage.error('保存失败！')
  })
}

const handleClose = () => {
  menuStore.closeCurrentPage(route, router)
}

onMounted(() => {
  loadAllDefine('3').then(data => {
    formData.value = data
    console.log(formData.value)
  })
})

</script>
